<template>
  <view>
    <basics v-if="PageCur=='basics'" />
    <components v-if="PageCur=='component'" />
    <plugin v-if="PageCur==='plugin'" />
		
    <view class="cu-bar tabbar bg-white shadow foot">
      <view class="action" data-cur="basics" @click="NavChange">
        <view class="cuIcon-cu-image">
          <image :src="'/static/tabbar/basics' + [PageCur==='basics'?'_cur':''] + '.png'" />
        </view>
        <view :class="PageCur=='basics'?'text-green':'text-gray'">元素</view>
      </view>
      <view class="action" data-cur="component" @click="NavChange">
        <view class="cuIcon-cu-image">
          <image :src="'/static/tabbar/component' + [PageCur === 'component'?'_cur':''] + '.png'" />
        </view>
        <view :class="PageCur=='component'?'text-green':'text-gray'">组件</view>
      </view>
      <view class="action" data-cur="plugin" @click="NavChange">
        <view class="cuIcon-cu-image">
          <image :src="'/static/tabbar/plugin' + [PageCur === 'plugin'?'_cur':''] + '.png'" />
        </view>
        <view :class="PageCur==='plugin'?'text-green':'text-gray'">扩展</view>
      </view>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
		return {
				PageCur: 'basics'
			}
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			}
		}
	}
</script>

<style>

</style>
